<!DOCTYPE html> 
<html> 
<head> 
    <title>Python Todo Demo</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
    <div class="container"> 
        <h1>添加新的待办事项</h1> 
        <div class="input-container">
            <input type="text" id="todo-input" placeholder="输入待办事项" onkeypress="handleKeyPress(event)"> 
            <button onclick="addTodo()">添加</button>
        </div>
        <div class="todo-lists">
            <div class="todo-section">
                <h2>未完成的任务:</h2>
                <ul id="incomplete-list"></ul>
            </div>
            <div class="todo-section">
                <h2>已完成的任务:</h2>
                <ul id="completed-list"></ul>
            </div>
        </div>
    </div> 

    <script> 
        // 处理按键事件，回车键添加待办事项
        function handleKeyPress(event) {
            // 检查是否按下回车键 (keyCode 13)
            if (event.key === 'Enter' || event.keyCode === 13) {
                // 阻止默认的回车键行为
                event.preventDefault();
                // 调用添加待办事项函数
                addTodo();
            }
        }
        
        // 加载所有待办事项 
        function loadTodos() { 
            fetch('http://localhost:5000/api/todos') 
                .then(response => response.json()) 
                .then(todos => { 
                    // 分离未完成和已完成的任务
                    const incompleteTodos = todos.filter(todo => !todo.completed);
                    const completedTodos = todos.filter(todo => todo.completed);
                    
                    // 更新未完成任务列表
                    const incompleteList = document.getElementById('incomplete-list');
                    incompleteList.innerHTML = incompleteTodos.map(todo => 
                        `<li>
                            <input type="checkbox" onclick="toggleTodo(${todo.id})">
                            <span class="todo-text" onclick="toggleTodo(${todo.id})">${todo.text}</span>
                            <button class="delete-btn" onclick="deleteTodo(${todo.id})">删除</button>
                         </li>` 
                    ).join(''); 
                    
                    // 更新已完成任务列表
                    const completedList = document.getElementById('completed-list');
                    completedList.innerHTML = completedTodos.map(todo => 
                        `<li class="completed">
                            <input type="checkbox" checked onclick="toggleTodo(${todo.id})">
                            <span class="todo-text">${todo.text}</span>
                            <button class="delete-btn" onclick="deleteTodo(${todo.id})">删除</button>
                         </li>` 
                    ).join(''); 
                }); 
        } 

        // 添加待办事项 
        function addTodo() { 
            const input = document.getElementById('todo-input'); 
            const text = input.value.trim(); 
            if (!text) return; 

            fetch('http://localhost:5000/api/todos', { 
                method: 'POST', 
                headers: { 'Content-Type': 'application/json' }, 
                body: JSON.stringify({ text: text }) 
            }) 
            .then(() => { 
                input.value = ''; 
                loadTodos(); // 重新加载列表 
            }); 
        } 

        // 删除待办事项
        function deleteTodo(id) {
            fetch(`http://localhost:5000/api/todos/${id}`, {
                method: 'DELETE'
            })
            .then(() => {
                loadTodos(); // 重新加载列表
            });
        }

        // 切换待办事项完成状态
        function toggleTodo(id) {
            fetch(`http://localhost:5000/api/todos/${id}/toggle`, {
                method: 'PUT'
            })
            .then(() => {
                loadTodos(); // 重新加载列表
            });
        }

        // 初始化加载数据 
        loadTodos(); 
    </script> 
</body> 
</html>